<template>
  <div>
    <el-dialog
      title="向客服留言"
      v-model="editVisible"
      width="50%"
      top="5vh"
      :close-on-click-modal="false"
      @close="handleclose"
    >
      <el-form>
        <el-form-item label="留言内容">
          <el-input v-model="feedback.content" type="textarea"></el-input>
        </el-form-item>
        <el-form-item :required="true">
          <div class="displayflex marginleft70">
            <!-- <span class="width160">*上传支付凭证（截图）：</span> -->
            <el-upload
              :action="uploaddata.url+''"
              :data="uploaddata.data"
              :on-preview="handlePictureCardPreview"
              :headers="uploaddata.headers"
              name="file"
              accept=".png,.jpg,.gif"
              list-type="picture-card"
              @click="handleUpload"
              :on-remove="handleRemove"
              :on-success="Uploadsuccess"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
          <div class="btn_b displayflex justify-content margintop30">
            <el-button @click="handleclose" class="icon-search1"
              >取消留言</el-button
            >
            <el-button
              type="primary"
              class="icon-search"
              @click="handleSaveEdit"
              >提交留言</el-button
            >
          </div>
        </el-form-item>
      </el-form>
      <template #footer> </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "../api/api";
export default {
  components: {},
  setup(props, context) {
    console.log(context);
    // 参考图片
    const editVisible = ref(context.attrs.editVisible);
    const radioValue = ref(context.attrs.radioValue);
    const orderId = context.attrs.orderId;
    const feedback = reactive({
      id: orderId,
      content: null,
      imageUrls: [],
    });
    const router = useRouter();
    const handleclose = () => {
      editVisible.value = false;
      context.emit("handleclose", editVisible.value);
    };
    //图片上传
    const uploaddata = ref({});
    const handleUpload = () => {
      uploaddata.value = {
        url: api.getUrl() + "external/file/upload", //接口名称
        data: {
          upType: "fc",
          sort: Math.floor(Math.random() * 20) + 1,
        },
        headers: {
          token: localStorage.getItem("token"),
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      };
    };
    const Uploadsuccess = (response, file, fileList) => {
      console.log(response);
      // var num = Math.floor(Math.random() * 20) + 1;
      if (response.data) {
        feedback.imageUrls.push(response.data.url);
      }
    };
    const handleSaveEdit = () => {
      if (!feedback.content) {
        ElMessage.error("请输入留言内容");
        return;
      }
      if (orderId) {
        api
          .postFormAPI("trade/client/order/feedback/addFeedback", feedback)
          .then((res) => {
            if (res.data.code == 1) {
              ElMessage.success("提交成功！");
              editVisible.value = false;
            } else {
              ElMessage.error(res.data.message);
            }
          })
          .catch((err) => console.log(err));
      } else {
          context.emit("handleSaveEdit", feedback);
      }
    };
    return {
      router,
      radioValue,
      editVisible,
      uploaddata,
      feedback,
      Uploadsuccess,
      handleclose,
      handleSaveEdit,
      handleUpload,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/common.css";
.btn_b {
  margin-top: 30px;
}
&:deep(.el-textarea__inner) {
  height: 150px;
}
</style>
